<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <div class="onSubmit">
          <el-row style="width: 91px">
            <el-button
              @click="$router.push('/questions/new')"
              class="custom-butto"
              type="success"
              icon="el-icon-edit"
              >新增试题</el-button
            >
          </el-row>
        </div>

        <!-- form表单 -->
        <el-form ref="form" :inline="true" :model="form" label-width="90px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID" label-width="80px">
                <el-select
                  @change="subjectID"
                  v-model="form.subjectID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in subform.subjectslist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="二级目录"
                prop="catalogID"
                label-width="80px"
              >
                <el-select
                  @change="catalogID"
                  v-model="form.catalogID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in subform.subjectID"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags" label-width="80px">
                <el-select v-model="form.tags" placeholder="请选择">
                  <el-option
                    v-for="item in subform.tags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword" label-width="80px">
                <el-input
                  v-model="form.keyword"
                  placeholder="请输入"
                  style="width: 107%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="试题类型"
                prop="questionType"
                label-width="80px"
              >
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option
                    v-for="item in subform.questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty" label-width="80px">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option
                    v-for="item in subform.difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction" label-width="80px">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in subform.direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID" label-width="80px">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <el-option
                    v-for="item in subform.userOptions"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks" label-width="80px">
                <el-input
                  v-model="form.remarks"
                  placeholder="请输入"
                  style="width: 107%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="企业简称"
                prop="shortName"
                label-width="80px"
              >
                <el-input
                  v-model="form.shortName"
                  placeholder="请输入"
                  style="width: 107%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" label-width="80px">
                <el-select
                  @change="provinces"
                  v-model="form.provinces"
                  placeholder="城市"
                  style="width: 85px"
                  class="select"
                >
                  <el-option
                    v-for="item in subform.provinces"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="form.city"
                  placeholder="区"
                  style="width: 85px"
                >
                  <el-option
                    v-for="item in subform.citys"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="filter-item fr">
                <el-button @click="clear()">清除</el-button>
                <el-button @click="filter()" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 数据记录 -->
        <el-alert
          v-if="cResultTip"
          :title="cResultTip"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 数据列表 -->
        <el-table
          :data="questdata"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column label="试题编号" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="100">
          </el-table-column>
          <el-table-column
            label="目录"
            prop="catalog"
            width="100"
          ></el-table-column>
          <el-table-column label="题型" width="100">
            <template slot-scope="scope">
              <span>{{
                scope.row.questionType === "1" ? "单选" : "多选"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="题干" width="260">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="200">
            <template slot-scope="scope">
              <span>{{ dayjs(scope.row.addDate).format("YYYY-MM-DD") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度" width="100">
            <template slot-scope="scope">
              <span>{{
                scope.row.difficulty == "1"
                  ? "简单"
                  : scope.row.difficulty == "2"
                  ? "一般"
                  : scope.row.difficulty == "3"
                  ? "困难"
                  : "一般"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" width="100">
            <template slot-scope="scope">
              <span>{{
                scope.row.creatorID === 2 ? "超级管理员" : "其他"
              }}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            label="操作"
            width="383"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="examineList(scope.row.id)"
                circle
                class="el-icon-view"
                plain
              ></el-button>
              <el-button
                type="success"
                @click="$router.push(`new?id=${scope.row.id}`)"
                circle
                class="el-icon-edit"
                plain
              ></el-button>
              <el-button
                type="danger"
                @click="delList(scope.row)"
                circle
                class="el-icon-delete"
                plain
              ></el-button>
              <el-button
                type="warning"
                @click="choiceAdd(scope.row.id)"
                circle
                class="el-icon-check"
                plain
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <el-pagination
          class="filter-item fr pagination"
          background
          @size-change="hSizeChange"
          @current-change="hCurrentChange"
          :current-page="Number(form.page)"
          :total="Number(total)"
          :page-size="Number(form.pagesize)"
          :page-sizes="[10, 15, 20, 50]"
          layout=" prev, pager, next,sizes,jumper"
        ></el-pagination>
        <el-dialog v-if="visible" title="题目预览" :visible.sync="visible">
          <questions-dialog
            ref="questionPreview"
            @close="closeFn"
            :testList="proparr"
          ></questions-dialog>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, detail, choiceAdd } from '@/api/hmmm/questions.js'
import { simple as subjectList } from '@/api/hmmm/subjects.js'
import {
  simple as directoryslist,
  remove as dellist
} from '@/api/hmmm/directorys.js'
import { simple as tagslist } from '@/api/hmmm/tags.js'
import { simple as userList } from '@/api/base/users'
// 导入枚举数据
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 导入城市数据
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'
import QuestionsDialog from '../components/question-tankuang.vue'
export default {
  data () {
    return {
      total: 0,
      visible: false,
      isLoading: false,
      subform: {
        subjectslist: [], // 学科列表
        catalogID: [], // 目录
        tags: [], // 标签数据
        difficulty: difficulty, // 难度
        questionType: questionType, // 试题类型
        direction: direction, // 方向
        provinces: getCity(), // 城市
        citys: [], // 地区
        userOptions: []
      },
      form: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 题目类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 地区
        province: '' // 城市
      },
      questdata: [],
      // 分页数据
      questions: {
        page: 1,
        pagesize: 10
      },
      proparr: {}
    }
  },
  components: {
    QuestionsDialog
  },
  created () {
    this.list()
    this.simple()
    this.userList()
  },
  methods: {
    // 学科简单列表数据
    async simple () {
      const res = await subjectList(this.questions)
      this.subform.subjectslist = res.data
    },
    // 用户
    async userList () {
      const { data: userArr } = await userList()
      this.subform.userOptions = userArr
    },

    // 目录数据
    async directoryslist () {
      const res = await directoryslist(this.form.subjectID)
      this.subform.subjectID = res.data
    },
    // 渲染列表数据
    async list (form) {
      const res = await list(form || this.questions)
      this.total = res.data.counts
      this.questdata = res.data.items
    },

    // 标签数据
    async tagslist () {
      const res = await tagslist(this.form.catalogID)
      this.subform.tags = res.data
    },
    // 切换学科事件
    subjectID () {
      this.directoryslist()
    },
    // 切换目录事件
    catalogID () {
      this.tagslist()
    },
    // 切换城市触发的事件
    provinces (cityName) {
      // 地区选中的数据清空
      this.form.city = null
      // 获取城市下的地区赋值给areaOptions
      this.subform.citys = getArea(cityName)
    },
    // 清空
    clear () {
      this.$refs.form.resetFields()
      this.form.provinces = ''
      this.form.city = ''
      this.list()
    },
    // 搜索
    filter () {
      this.list(this.form)
    },
    // 添加精选题库
    async choiceAdd (id) {
      const res = choiceAdd({ id, choiceState: 1 })
      if (res.success) this.$message.error('添加失败')
      this.$message.success('加入精选成功')
      this.list()
    },
    // 查看功能
    async examineList (id) {
      this.visible = true
      const res = await detail({ id })
      this.proparr = res.data
    },
    // 关闭弹框
    closeFn () {
      this.visible = false
    },
    // 删除功能
    async delList (val) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (this.questdata.length === 1) {
            this.questions.page--
          }
          if (this.questions.page <= 0) {
            this.questions.page = 1
          }
          await dellist(val)
          this.$message({
            type: 'success',
            message: '删除成功'
          })

          this.list()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 更改每页显示的条数
    hSizeChange (size) {
      this.questions.page = 1
      this.questions.pagesize = size
      this.list()
    },
    // 点击某一个页码
    hCurrentChange (np) {
      this.questions.page = np
      this.list()
    }
  },
  computed: {
    cResultTip () {
      return `共 ${this.total} 条记录`
    }
  }
}
</script>

// <style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
// // .pagination {
// //   margin-top: 10px;
// // }
//
</style>
<style scoped>
.onSubmit {
  display: flex;
  flex-direction: row-reverse;
  height: 50px;
  margin-right: 37px;
}
/* .select {
  margin-right: 15px;
}
.buttonAll {
  margin-left: 133px;
}
.custom-butto {
  margin-right: -28px;
}
.pagination {
  margin: 10px 0px 10px 0;
} */
</style>
